<template>
  <div class="min-h-screen flex flex-col dark:bg-gray-900 overflow-hidden">
    <!-- 导航栏 -->
    <Header
      :isMobileMenuOpen="isMobileMenuOpen"
      @toggleMobileMenu="isMobileMenuOpen = !isMobileMenuOpen"
      class="shadow-md bg-gray-50 dark:bg-gray-900"
    ></Header>
    <!-- 移动菜单内容 -->
    <div
      v-show="isMobileMenuOpen"
      class="md:hidden bg-white dark:bg-gray-900 shadow-lg z-10"
    >
      <!-- 主题切换项 -->
      <div
        class="px-4 py-2 flex items-center justify-between text-gray-600 dark:text-gray-300 border-b border-gray-100 dark:border-gray-800"
      >
        <span>主题设置</span>
        <ThemeToggle class="mobile-theme-toggle dark:text-gray-300" />
      </div>
    </div>
    <!-- 主内容区 -->
    <main class="flex-1 w-full overflow-x-hidden overflow-y-auto">
      <div
        class="mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8 md:flex md:gap-6 lg:gap-8 xl:gap-12 max-w-[90rem]"
      >
        <!-- 左侧资料卡 -->
        <div class="md:w-64 lg:w-72 xl:w-80 flex-shrink-0 mb-6 md:mb-0">
          <BlogAuthorProfile
            class="dark:bg-gray-900 p-4 sm:p-6 rounded-xl shadow-sm sticky top-4 sm:top-8 transition-all duration-300 hover:shadow-md"
          />
        </div>
        <!-- 右侧项目 -->
        <div class="flex-1 min-w-0">
          <div
            class="p-4 sm:p-6 rounded-xl shadow-sm border border-gray-100 dark:border-gray-900 transition-all duration-300 hover:shadow-md flex flex-col"
          >
            <h3
              class="text-base sm:text-lg font-semibold dark:text-gray-100 text-primary-dark mb-3 sm:mb-4"
            >
              最近项目
            </h3>
            <div
              class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 overflow-y-auto hide-scrollbar pb-4"
              style="max-height: calc(100vh - 18rem)"
            >
              <ProjectCard
                v-for="(project, index) in recentProjects"
                :key="project.id"
                :project="project"
                class="animate-fadeInUp"
                :style="`animation-delay: ${index * 100}ms;`"
              />
            </div>
          </div>
        </div>
      </div>
    </main>
    <Footer class="dark:bg-gray-900 bg-gray-50" />
  </div>
</template>

<script setup lang="ts">
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
const isMobileMenuOpen = ref(false);

const { data: recentProjects } = await useFetch("/api/getAuthorRepos");
</script>

<style>
/* 添加平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 添加过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s ease-out forwards;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .prose {
    font-size: 0.875rem;
  }

  .prose h1 {
    font-size: 1.5rem;
  }

  .prose h2 {
    font-size: 1.25rem;
  }

  .prose h3 {
    font-size: 1.125rem;
  }

  .prose img {
    margin: 1rem 0;
  }

  .prose pre {
    padding: 0.75rem;
  }

  .prose blockquote {
    padding-left: 1rem;
    margin: 1rem 0;
  }
}

/* 全局隐藏滚动条样式 */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Webkit */
}

/* 小屏幕下优化卡片显示 */
@media (max-width: 640px) {
  .animate-fadeInUp {
    animation-duration: 0.3s;
  }
}
</style>
